/* ========================================================================
   Component: alerts.less
 ========================================================================== */

// Variables
// ========================================================================

$alerts-position: 60px;
$alerts-z-index: 9090;
$alerts-width: 350px;

// Message container for positioning

.alerts {
  position: fixed;
  top: $alerts-position;
  left: $alerts-position;
  z-index: $alerts-z-index;
  width: $alerts-width;
  @extend .alerts-top-right;

  &:hover .alert .close {
    opacity: 1;
    visibility: visible;
  }
}

// Position modifiers

.alerts-top-right,
.alerts-bottom-right {
  left: auto;
  right: $alerts-position;
}

.alerts-top-center,
.alerts-bottom-center {
  left: 50%;
  margin-left: ($alerts-width / -2);
}

.alerts-bottom-left,
.alerts-bottom-right,
.alerts-bottom-center {
  top: auto;
  bottom: $alerts-position;
}

// Responsiveness

// Phones portrait and smaller */
@media (max-width: $mq-mobile) {

// Fit in small screen

  .alerts {
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
  }

}
